<template>
  <el-dialog title="新建短信" custom-class="sms-dialog" :close-on-click-modal="false" :modal="false" :visible.sync="open"
    :before-close="handleClose">
    <el-form ref="form" label-suffix=":" :model="formData" hide-required-asterisk>
      <el-form-item label="收件人" prop="receiver">
        <el-select v-model="formData.receiver" multiple disabled class="receiver-select">
        </el-select>
      </el-form-item>
    </el-form>

    <el-divider class="default-divider"></el-divider>

    <div class="sms-footer">
      <div class="sms-file">
        <div class="title" v-show="showUploadTitle">附件：</div>
        <el-upload class="sms-upload" ref="upload" :action="action" :headers="uploadHeaders" :on-success="onSuccess"
          :limit="1" :on-exceed="onExceed" :before-upload="beforeUpload" :on-remove="handleRemove" :accept="acceptType">
          <img style="display:none" src="@/assets/images/Add.png" id="add" />
        </el-upload>
      </div>

      <div class="sms-send">
        <img src="@/assets/images/Add.png" @click="clickAdd" />
        <el-input type="textarea" rows="5" resize="none" placeholder="最长1024个字符" v-model="smsContent"
          maxlength="1024" />
        <img src="@/assets/images/send.png" @click="handleCommit" />
      </div>
    </div>

  </el-dialog>
</template>

<script>
import axios from 'axios'
import { msgWarning, msgError } from '@/utils/message'
export default {
  props: {
    open: Boolean,
    formData: Object,
  },

  data() {
    return {
      form: {},
      uploadHeaders: {
        ContentType: 'multipart/form-data',
        Authorization: sessionStorage.getItem('tokenSign'),
        FileType: 'smssend',
      },
      action: axios.defaults.baseURL + '/fileflow',
      acceptType: '',

      showUploadTitle: false,

      smsContent: '', // 短信内容
      smsFileName: '', // 短信文件名，由服务器生成
      smsRealFileName: '', // 短信上传时的真实文件名
      smsFileSize: '', // 文件大小

      picSuffix: '.png, .jpg, .jpeg, .bmp, .gif', // 图片文件后缀
      videoSuffix: '.mp4,.m2v,.mkv,.rmvb,.wmv,.avi,.flv,.mov,.m4v', // 视频文件后缀
      audioSuffix: '.wav, .mp3, .au, .wmv', // 语音文件
    }
  },
  methods: {
    // 点击添加文件按钮
    clickAdd() {
      document.getElementById('add').click()
    },
    // 文件超过限制
    onExceed() {
      msgWarning('最多只能添加一个附件')
    },
    //文件上传
    beforeUpload(file) {
      let flag = file.name.lastIndexOf('.') === -1
      if (flag) msgError('文件后缀有误')
      return !flag
    },
    // 删除文件
    handleRemove() {
      this.$refs.upload.clearFiles()
      this.showUploadTitle = false
    },
    // 文件上传成功
    onSuccess(response, file) {
      if (response.msg === 'success') {
        this.smsFileName = response.filename
        this.smsRealFileName = file.name
        this.smsFileSize = file.size
        this.showUploadTitle = true
        return
      } else {
        msgError('上传文件失败')
        this.$refs.upload.clearFiles()
        this.showUploadTitle = false
      }
    },
    // 获取文件格式
    smsFormat() {
      let suffix = this.smsRealFileName
        .substring(this.smsRealFileName.lastIndexOf('.'))
        .toLowerCase()
      if (this.picSuffix.includes(suffix)) return 'photo'
      if (this.videoSuffix.includes(suffix)) return 'video'
      if (this.audioSuffix.includes(suffix)) return 'audio'
      return 'file'
    },
    //发送短信
    handleCommit() {
      if (!this.smsContent && !this.smsRealFileName) {
        msgError('请输入短信内容或添加附件')
        return
      }
      let form = {}
      form.smsFormat = this.smsRealFileName ? this.smsFormat() : 'sms'
      form.smsContent = this.smsContent
      form.smsFileName = this.smsFileName
      form.smsRealFileName = this.smsRealFileName
      form.smsFileSize = this.smsFileSize
      form.smsType = this.formData.contacts.length === 1 ? 'single' : 'group'
      form.smsContacts =
        this.formData.contacts.length === 1
          ? this.formData.contacts[0]
          : this.formData.contacts

      SDK.smsSend(form) // 提交表单
        .then((res) => {
          this.$confirm('短信已发送, 是否跳转到短信页面?', '提示', {
            customClass: 'custom-message-box',
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          })
            .then(() => {
              this.$router.push({ name: 'sms' })
            })
            .catch(() => {})

          this.handleClose()
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // 关闭或取消
    handleClose() {
      this.$emit('update:open', false)
    },
  },
}
</script>

<style lang="scss" scoped>
@import '~@/assets/scss/sms_dialog.scss';
</style>


